-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
feat(nuxt): migrate to latest @vueuse/head
#8000
Conversation
Β Open in CodeSandbox Web Editor | VS Code | VS Code Insiders |
β Deploy Preview for nuxt3-docs canceled.
|
Still working on this and want to build out full tests, feel free to review the code but it may change |
It would be very nice if this could be part of rc12. |
β¦t3-fork into feat/vueuse-head-migration
β¦t3-fork into feat/vueuse-head-migration
Socket Security Reportπ No new dependency issues detected in pull request Socket.dev scan summary
Bot CommandsTo ignore an alert, reply with a comment starting with Powered by socket.dev |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is very exciting β€οΈ A few comments below.
packages/nuxt/package.json
Outdated
@@ -44,7 +44,7 @@ | |||
"@nuxt/vite-builder": "3.0.0-rc.11", | |||
"@vue/reactivity": "^3.2.40", | |||
"@vue/shared": "^3.2.40", | |||
"@vueuse/head": "^0.7.12", | |||
"@vueuse/head": "^1.0.0-rc.5", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My only worry is if there are any bugs in @vueuse/head
it will be difficult to fix them until the next Nuxt release. If you're happy to commit to no (intended) breaking changes between rc5 -> v1 then maybe we could consider ~
constraint?
wdyt @antfu?
@vueuse/head
@vueuse/head
Hey @nicooprat By default in the latest RC of @vueuse/head, all input is deemed raw. There is an exposed function called Nuxt does not have this composable (yet), if you have any more questions on it please make an issue on the @vueuse/head repo. |
Thanks for your answer. I just understood that I was looking at the wrong version of the docs, the correct ones are from the latest RC tag: https://github.com/vueuse/head/tree/v1.0.0-rc.12 So
|
π Linked issue
resolves nuxt/nuxt#14271, resolves nuxt/nuxt#15029, resolves nuxt/nuxt#13848, (maybe resolves) nuxt/nuxt#15093
β Type of change
π Description
A number of updates have gone out for https://github.com/vueuse/head to try and improve the DX, fix bugs and unblock integration features. This PR aims to get Nuxt using them.
nuxt-hedge
To make the upgrade easier to test, I created the module https://github.com/harlan-zw/nuxt-hedge, it has core logic parity to this PR.
You can play with it here: https://stackblitz.com/edit/nuxt-starter-we3qh7?file=pages/index.vue
Nuxt
meta
Module UpdateMissing Component props
Adds support for
body
andrender-priority
to components (Note:key
is not supported by Vue for deduping)Block DOM updates until page is ready
This solves the suspense issue and improves hydration speed. (nuxt/nuxt#14271)
Simplify ref wrapping/unwrapping
viewport
andcharset
) to only be typed for thenuxt.config.ts
app.head
. This avoids the complexity around wrapping every input in a refapp.head
is typed as a plain object - no reactivity(see breaking changes)
@vueuse/head
UpdatesType Improvements
Nuxt has not migrated to the latest @vueuse/head types (powered by zhead), this PR introduces them.
Legacy key support
Help users migrating from vue-meta / nuxt v2
children
Better Reactivity
Currently, users are restricted to refs and computed, now they can use computed getters like they can elsewhere in Vue and VueUse.
Hooks
These are not documented yet as they are intended to be for framework integrations.
hookTagsResolved
Β vueuse/head#115More performant
When there are multiple
useHead
's, there is a significant performance improvement. This also allows tags will be ordered when CSR'd.The shortcuts
viewport
andcharset
are available to make configuring these global meta tags easier. However, it complicates useHead reactivity logic, so we choose to drop support for them within the composable.Instead, these shortcuts can only be provided when used in
nuxt.config.ts
. If you are using the values (width=device-width, initial-scale=1
,utf-8
), then you can simply delete these as they are the defaults.Before - Your page
After - nuxt.config.ts
Alternatively, you can always type out the full meta tag
After - Your page
π Checklist